<template>
  <div class="dashboard-editor-container" id="test">
    <div class="home-top">
      <img
        class="home-title-pic"
        src="../assets/home/homeTopTitle.png"
        alt=""
      />
    </div>
    <div class="home-box">
      <div class="home-left">
        <div class="home-list">
          <div class="home-list-title">
            <div class="home-list-title-left">换电订单</div>

            <!-- 占时放在这 -->
            <selectStations
              :stationList="stationList"
              :stationName="stationName"
              @thisActive="changestationName"
            />

            <SelectTime
              @thisActive="thisActive"
              :nowTime="home1Time"
              :timeList="timeRightOne"
            ></SelectTime>
          </div>
          <div class="home-list-content">
            <HomeList2 :pieData="electricOrders" unit="222"></HomeList2>
            <!--            <div style="width: 200px;height: 100px;" id="ecs"></div>-->
          </div>
        </div>
        <div class="home-list">
          <div class="home-list-title">
            <div class="home-list-title-left">换电金额排行</div>
            <SelectTime
              @thisActive="thisActive2"
              :nowTime="home2Time"
              :timeList="timeRightTwo"
            ></SelectTime>
          </div>
          <div class="home-list-content">
            <HomeList3 :pieData="billOrders" unit="222"></HomeList3>
          </div>
        </div>
      </div>
      <div class="home-center">
        <div class="home-center-top">
          <div
            class="home-center-top-list"
            v-for="(item, index) in nowCarDatas"
            :key="index"
          >
            <div class="home-center-top-list-top">
              <count-to :start-val="0" :end-val="item.num" :duration="2600" />
            </div>
            <div class="home-center-top-list-bottom">{{ item.name }}</div>
          </div>
        </div>
        <div class="header-box-left">
          <!--        <img src="../assets/images/indexTopLeftPic.png" alt="">-->
          <div class="header-box-left-text">
            <div class="showArea">
              当前展示地区：
              <span @click="handleBack(1)">全国</span
              ><i v-show="level >= 2">></i
              ><span v-show="level >= 2" @click="handleBack(2)">{{
                history[1] ? history[1] : "--"
              }}</span
              ><i v-show="level >= 3" :name="level">></i
              ><span v-show="level >= 3" @click="handleBack(3)">{{
                history[2] ? history[2] : "--"
              }}</span
              ><i v-show="level >= 4">></i
              ><span v-show="level >= 4" @click="handleBack(4)">{{
                history[3] ? history[3] : "--"
              }}</span>
            </div>
          </div>
        </div>
        <div v-show="level == 3" class="home-center-bottom" ref="charts2"></div>
        <div
          v-show="level == 1 || level == 2"
          class="home-center-bottom"
          ref="charts"
        ></div>
        <!--  地图&ndash;&gt;-->
      </div>
      <div class="home-right">
        <div class="home-list">
          <div class="home-list-title">
            <div class="home-list-title-left">车辆换电里程排行</div>
            <SelectTime
              @thisActive="thisActive4"
              :nowTime="home4Time"
              :timeList="timeLeftAll"
            ></SelectTime>
          </div>
          <div class="home-list-content">
            <HomeList5 :pieData="carElectrics" unit="222"></HomeList5>
          </div>
        </div>
        <div class="home-list">
          <div class="home-list-title">
            <div class="home-list-title-left">换电站换电比例</div>
            <SelectTime
              @thisActive="thisActive3"
              :nowTime="home3Time"
              :timeList="timeLeftAll"
            ></SelectTime>
          </div>
          <div class="home-list-content">
            <HomeList4 :pieData="stationNum" unit="222"></HomeList4>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { EleResize } from "@/utils/resize/index.js";
import { getRem } from "@/utils/resize/rem";
import CountTo from "vue-count-to";
import {
  mapDataDistrict,
  mapDataCity,
  getCarElectricSort,
  getCarMileageSort,
  getElectricOrderSort,
  getBaseCenter,
  electricPriceSortList,
  getStationNum,
  getHomeCarMap,
  ChinamapDataCity,
  homeMapDataCity,
  getStationList,
} from "@/api/home/index";
import SelectTime from "../components/bigScreen/SelectTime";
import HomeList2 from "../components/bigScreen/HomeList2";
import HomeList3 from "../components/bigScreen/HomeList3";
import HomeList4 from "../components/bigScreen/HomeList4";
import HomeList5 from "../components/bigScreen/HomeList5";
import HomeList6 from "../components/bigScreen/HomeList6";
import selectStations from "../components/bigScreen/selectStations";
import axios from "axios";
let myChart1 = null; //全国图表echarts
export default {
  name: "Index",
  components: {
    selectStations,
    CountTo,
    SelectTime,
    HomeList2,
    HomeList3,
    HomeList4,
    HomeList5,
    HomeList6,
  },
  data() {
    return {
      stationId: "",
      stationName: "",
      stationList: [],
      electricTrendData: [],
      home1Show: false,
      home1Time: {
        name: "近7天",
        time: "1",
      },
      home2Time: {
        name: "近半年",
        time: "3",
      },
      home3Time: {
        name: "昨日",
        time: "0",
      },
      home4Time: {
        name: "昨日",
        time: "0",
      },
      home5Time: {
        name: "昨日",
        time: "0",
      },
      timeRightOne: [
        {
          name: "近7天",
          time: "1",
        },
        {
          name: "近半年",
          time: "3",
        },
      ],
      timeRightTwo: [
        {
          name: "近半年",
          time: "3",
        },
        {
          name: "近1年",
          time: "4",
        },
      ],
      timeLeftAll: [
        {
          name: "昨日",
          time: "0",
        },
        {
          name: "近7天",
          time: "1",
        },
        {
          name: "近1月",
          time: "2",
        },
        {
          name: "近半年",
          time: "3",
        },
        {
          name: "近1年",
          time: "4",
        },
      ],
      nowCarDatas: [
        {
          name: "在线车辆",
          num: 0,
        },
        {
          name: "离线车辆",
          num: 0,
        },
        {
          name: "行驶里程",
          num: 0,
        },
        {
          name: "换电里程",
          num: 0,
        },
        {
          name: "换电次数",
          num: 0,
        },
      ],
      stationNum: [],
      clglData: [],
      that: this,
      belongsToIndex: "",
      abc: "",
      color1: "#48c49b",
      color2: "#ff6367",
      infoData: {},
      cName1: "用户统计",
      cName2: "交易统计",
      cName3: "换电里程",
      cName4: "换电次数",
      cName5: "订单统计",
      todayTotalNum: 0, //今日换电订单数
      totalNum: 0, //累计换电订单数
      todayTotalMileage: 0, // 今日换电里程
      totalMileage: 0, // 累计换电里程
      userTotalNum: 0, //用户总数
      hdUserTotalNum: 0, //换电认证数
      onlineNum: 0, //网约车总数
      taxiNum: 0, //出租车总数
      zdTotalNum: 0, //累计站点数
      usingNum: 0, //启用站点数
      abandonmentNum: 0, //废弃站点数
      makingNum: 0, //再建站点数
      receivableAmount: 0, //累计应收额
      payAmount: 0, //累计实付额
      preferentialLine: 0, //累计优惠额
      todayDeceivableAmount: 0, //今日累计应收额
      todayPayAmount: 0, //今日累计实付额
      todayPreferentialLine: 0, //今日优惠额度
      orderNum: [],
      orderX: [], //订单统计x轴
      chartData: [],
      chartDataX: [], //用户统计x轴
      transactionData: [],
      transactionX: [],
      orderRankData: [],
      orderRankX: [],
      chargeUpOrderRankData: [],
      chargeUpOrderRankX: [],
      stationDataNum: [], //站点统计
      stationDataNumX: [], //站点统计x轴
      listNotice: [], //公告
      dealerOrderX1: [], //换电次数x轴
      dealerOrderX2: [], //换电里程x轴
      dealerOrderData1: [], //换电次数
      dealerOrderData2: [], //换电里程
      dealerTotalNum: 0, //车辆总数
      dealerOnlineCarNum: 0, //车辆在线数
      dealerOfflineCarNum: 0, //车辆离线数
      dealerTotalOrderNumMileage: 0, //总换电公里数
      dealerTodayOrderNumMileage: 0, //总换电公里数
      dealerTodayTotalNum: 0, //当日换电次数
      dealerTotalTotalNum: 0, //总换电次数
      // 订单统计
      options: [
        {
          value: "4",
          label: "全部",
        },
        {
          value: "1",
          label: "近一周",
        },
        {
          value: "2",
          label: "近一月",
        },
        {
          value: "3",
          label: "近一年",
        },
      ],
      value1: "1",
      value2: "1",
      value3: "1",
      value4: "1",
      value5: "1",
      level: 1,
      history: ["全国"],
      jsonData: [
        { name: "安徽省", value: "anhui.json" },
        { name: "澳门特别行政区", value: "aomen.json" },
        { name: "北京", value: "beijing.json" },
        { name: "重庆", value: "chongqing.json" },
        { name: "福建省", value: "fujian.json" },
        { name: "甘肃省", value: "gansu.json" },
        { name: "广东省", value: "guangdong.json" },
        { name: "广西壮族自治区", value: "guangxi.json" },
        { name: "广州", value: "guizhou.json" },
        { name: "海南省", value: "hainan.json" },
        { name: "河北省", value: "hebei.json" },
        { name: "黑龙江省", value: "heilongjiang.json" },
        { name: "河南省", value: "henan.json" },
        { name: "湖北省", value: "hubei.json" },
        { name: "湖南省", value: "hunan.json" },
        { name: "江苏省", value: "jiangsu.json" },
        { name: "江西省", value: "jiangxi.json" },
        { name: "吉林省", value: "jilin.json" },
        { name: "辽宁省", value: "liaoning.json" },
        { name: "内蒙古自治区", value: "neimenggu.json" },
        { name: "宁夏回族自治区", value: "ningxia.json" },
        { name: "青海省", value: "qinghai.json" },
        { name: "山东省", value: "shandong.json" },
        { name: "上海", value: "shanghai.json" },
        { name: "山西省", value: "shanxi.json" },
        { name: "四川省", value: "sichuan.json" },
        { name: "陕西省", value: "shanxi1.json" },
        { name: "台湾", value: "taiwan.json" },
        { name: "天津", value: "tianjin.json" },
        { name: "香港特别行政区", value: "xianggang.json" },
        { name: "新疆维吾尔自治区", value: "xinjiang.json" },
        { name: "西藏自治区", value: "xizang.json" },
        { name: "云南省", value: "yunnan.json" },
        { name: "浙江省", value: "zhejiang.json" },
      ],
      cityParmas: null,
      cityJsonData: [
        { name: "合肥市", value: "hefei.json" },
        { name: "芜湖市", value: "wuhu.json" },
        { name: "蚌埠市", value: "bengbu.json" },
        { name: "淮南市", value: "huainan.json" },
        { name: "马鞍山市", value: "maanshan.json" },
        { name: "淮北市", value: "huaibei.json" },
        { name: "铜陵市", value: "tongling.json" },
        { name: "安庆市", value: "anqing.json" },
        { name: "黄山市", value: "huangshan.json" },
        { name: "滁州市", value: "chuzhou.json" },
        { name: "阜阳市", value: "fuyang.json" },
        { name: "宿州市", value: "suzhou.json" },
        { name: "六安市", value: "liuan.json" },
        { name: "亳州市", value: "bozhou.json" },
        { name: "池州市", value: "chizhou.json" },
        { name: "宣城市", value: "xuancheng.json" },
        { name: "临沂市", value: "linyi.json" },
        { name: "济南市", value: "jinan.json" },
        { name: "威海市", value: "weihai.json" },
      ],
      isMap: true, //是否展示map地图
      isEcharts: true, //控制全国的地图
      pointData: [],
      pointData1: [],
      allEleNum: 0,
      // echarts系列
      mapName: "china",
      // 现有换电站省会及其数量
      stationData: [],
      chinaJson: [], //当前的全国json数据
      option: [], //echarts的配置
      myChart1: "", //地图的echarts
      currentProvince: { name: null, value: null }, //当前的省份
      // 部分echatrs的配置集合
      allOption: {
        trackOption: "", //行驶轨迹覆盖配置
        electricTrendOption: "", //换电趋势配置
      },
      // 估算续航里程变化数据
      trendData: [],
      useColor: [
        "#FCBA62",
        "#00FFF0",
        "#ff693c",
        "#7731ff",
        "#b9ff31",
        "#31a0ff",
        "#3eff31",
        "#31ff96",
        "#31ffe2",
        "#F93F00",
        "#93ff31",
        "#ff6262",
        "#04C8F9",
        "#ff9a31",
        "#ffc931",
        "#fff931",
        "#31e2ff",
        "#3154ff",
        "#b931ff",
        "#e931ff",
        "#ff31b6",
        "#614eff",
        "#4e74ff",
        "#4e8dff",
        "#4ed6ff",
        "#4efff7",
        "#4effde",
        "#4eff8d",
        "#71ff4e",
        "#bbff4e",
        "#fcff4e",
        "#ffd14e",
        "#ffb84e",
        "#ff6f4e",
      ],
      bdNumberData: [],
      scTop: 0, //滚动距离
      mapTimer: null, //全国数据定时展示
      cityId: null, //当前城市id
      prvId: null, //当前省会id
      stationName: "--", //当前站点名称
      warehouseNum: 1, //站点仓库的个数
      warehouseData: "",
      rechargeData: [], // 充电信息状态数据
      bdId: null, //当前电池id
      prvParams: null, //当前地图的省会数据
      battery: {
        totalChangeCount: 0,
        totalChangeElectric: 0,
        totalChargeCount: 0,
        totalMileage: 0,
      },
      consistencyData1: [], //电池一致性数据
      rootsData: [], //溯源数据
      lineArr: [], //电池轨迹回放
      area: null, //当前运营区域
      clickTrue: false, //控制地图下钻多次点击
      // 换电频次mock
      carElectrics: [],
      electricOrders: [],
      billOrders: [],
      electricProportion: [],
      electricProportion1: [],
      electricProportion2: [],
      // 城市排名mock
      carSortData: [],
      // 数据概览数据
      overviewData: {
        changeMileage: "",
        totalMileage: "",
        changeNum: "",
      },
      hdzsj: [],
      isCanClick: true,
      homeCar: [],
    };
  },
  created() {
    this.getStationListFun();
    // this.fetchStationChangeElectricTimes();
    // this.electricPriceSortList();
    // this.fetchStationMapInfo();
  },
  mounted() {
    getRem(1920, 100);
    window.addEventListener("resize", () => {
      myChart1 ? myChart1.resize() : null;
    });
    this.myEchart();
  },
  watch: {
    history: {
      handler(newData, oldData) {
        if (this.level == 1) {
          this.area = "(全国)";
        } else if (this.level == 2) {
          this.area = "(全国" + "-" + this.history[1] + ")";
        } else if (this.level >= 3) {
          this.area =
            "(全国" + "-" + this.history[1] + "-" + this.history[2] + ")";
        }
      },
      immediate: true,
      deep: true,
    },
    stationId() {
      this.getList();
      this.getCarElectricSort();
      this.getElectricOrderSort();
      this.getStationNum();
      this.electricPriceSortList();
    },
  },
  methods: {
    changestationName(item) {
      this.stationName = item.stationName;
      this.stationId = item.stationId;
    },
    async getStationListFun() {
      let res = await getStationList();
      this.stationList = res.data;
      this.stationId = res.data[0].stationId;
      this.stationName = res.data[0].stationName;
      this.getList();
      this.getCarElectricSort();
      this.getElectricOrderSort();
      this.getStationNum();
      this.electricPriceSortList();
    },
    async myEchart2() {
      //  if(this.cityParmas){
      //   let prvName = this.cityParmas.name;
      //   this.jsonData.forEach((item) => {
      //     if (item.name.includes(prvName)) {
      //       this.currentProvince = item;
      //     }
      //   });
      //   /*获取省的所有地级市地图数据*/
      //   const ret = await axios.get(
      //     "/static/map/province/" + this.currentProvince.value
      //   );
      // }else{
      //   const ret = await axios.get("/static/map/province/hefei.json");
      // }
      console.log("this.cityParmas", this.cityParmas);
      const ret = await axios.get(
        this.cityParmas
          ? this.cityParmas
          : "https://hz.zeqingev.com/static/map/province/hefei.json"
      );

      // const ret = await axios.get("/static/map/province/anhui.json");
      // const ret = await axios.get("/static/map/china.json");
      let max = 4000;
      this.chinaJson = ret.data;
      myChart1 = this.$echarts.init(this.$refs.charts2);
      myChart1.resize();
      this.$echarts.registerMap("hf", this.chinaJson);
      /*获取地图数据*/
      let mapFeatures = ret.data.features;
      let geoCoordMap = {};
      mapFeatures.forEach(function (item) {
        // 地区名称
        var name = item.properties.name;
        // 地区经纬度
        geoCoordMap[name] = item.properties.cp;
      });
      // this.stationData = [{
      //   name:'天鹅湖',
      //   value:[117.281593,31.944765,22],
      //   carValue:'44',
      //   battyValue:'99',
      //   id:2
      // },{
      //   name:'蜀山',
      //   value:[117.260536,31.851158,22],
      //   carValue:'ww',
      //   battyValue:'33',
      //   id:4
      // }]
      // for (let i = 0; i < this.stationData.length; i++) {
      //   let geoCoord = geoCoordMap[this.stationData[i].name];
      //   if (geoCoord) {
      //
      //     this.pointData.push({
      //       name: this.stationData[i].name,
      //       value: geoCoord.concat(this.stationData[i].value),
      //       carValue: geoCoord.concat(this.stationData[i].carValue),
      //       battyValue: geoCoord.concat(this.stationData[i].battyValue),
      //       id: this.stationData[i].id,
      //     });
      //   }
      // }
      // var yuan1 = this.level == 1?'gold':'transparent'
      // var yuan2 = this.level == 1?'green':'transparent'
      var geoCoordMap2 = {
        // aa: [117.331689,31.994871],
        // bb: [117.281598,31.944760]
      };
      var geoCoordData2 = [];
      var imgUrl1 = "image://" + require("@/assets/home/thereCar.png");
      var imgUrl2 = "image://" + require("@/assets/home/notCar.png");
      for (var i = 0; i < this.homeCar.length; i++) {
        this.$set(geoCoordMap2, this.homeCar[i].vehiclePlate, [
          this.homeCar[i].latitude,
          this.homeCar[i].longitude,
        ]);
        let newItem = {
          name: this.homeCar[i].vehiclePlate,
          value: "",
          symbol: this.homeCar[i].carState == 1 ? imgUrl1 : imgUrl2,
          vehiclePlate: this.homeCar[i].vehiclePlate,
          carState: this.homeCar[i].carState,
          speed: this.homeCar[i].speed,
          soc: this.homeCar[i].soc,
          mileage: this.homeCar[i].mileage,
          chargingState: this.homeCar[i].chargingState,
          totalVoltage: this.homeCar[i].totalVoltage,
          current: this.homeCar[i].current,
          maxVoltage: this.homeCar[i].maxVoltage,
          minVoltage: this.homeCar[i].minVoltage,
          maxTemperature: this.homeCar[i].maxTemperature,
          minTemperature: this.homeCar[i].minTemperature,
        };
        geoCoordData2.push(newItem);
      }

      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap2[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
              info: data[i].info || {},
              symbol: data[i].symbol || {},
              symbolSize: [24, 19],
              vehiclePlate: data[i].vehiclePlate,
              carState: data[i].carState,
              speed: data[i].speed,
              soc: data[i].soc,
              mileage: data[i].mileage,
              chargingState: data[i].chargingState,
              totalVoltage: data[i].totalVoltage,
              current: data[i].current,
              maxVoltage: data[i].maxVoltage,
              minVoltage: data[i].minVoltage,
              maxTemperature: data[i].maxTemperature,
              minTemperature: data[i].minTemperature,
            });
          }
        }
        return res;
      };
      const option = {
        animation: true,
        animationDuration: 2000,
        animationEasing: "cubicInOut",
        animationDurationUpdate: 2000,
        animationEasingUpdate: "cubicInOut",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          width: "auto",
          height: "auto",
          right: "10%",
          top: 5,
          bottom: "10%",
          left: "10%",
        },
        geo: [
          {
            roam: false, //缩放和平移
            show: true,
            map: "hf",
            zoom: 0.9,
            layoutCenter: ["50%", "50%"],
            layoutSize: "110%",
            label: {
              normal: {
                //静态的时候展示样式
                show: true, //是否显示地图省份得名称
                textStyle: {
                  color: "#fff",
                  fontSize: "12%",
                  fontFamily: "Arial",
                },
              },
              emphasis: {
                show: false,
                //动态展示的样式
                color: "#fff",
              },
            },

            blur: {
              label: { show: true, color: "#000" },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  color: "#fff",
                },
                color: "#fff",
                borderColor: "rgba(17,166,188, .7)",
                borderWidth: 3,
                shadowColor: "rgba(6,228,219, .5)",
                shadowBlur: 30,
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 1000,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      // color: "#0D59C1", // 0% 处的颜色
                      color: "#044049",
                    },
                    {
                      offset: 0.5,
                      // color: "#53C9C7", // 100% 处的颜色
                      color: "#143E4C", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      // color: "#53C9C7", // 100% 处的颜色
                      color: "#042532", // 100% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
              emphasis: {
                label: {
                  show: false,
                  color: "#fff",
                },
                borderWidth: 3,
                shadowColor: "rgba(6,228,219, .5)",
                shadowBlur: 30,
                // borderColor: "rgba(255, 230, 175,0.8)",
                borderColor: "rgba(17,166,188, .5)",
                // shadowColor: "rgba(255, 230, 175,0.5)",
                // shadowBlur: 30,
                textStyle: {
                  color: "#fff",
                  fontSize: "12%",
                  backgroundColor: "transparent",
                },
                // areaColor: "#2AB8FF",
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 1000,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      // color: "#0D59C1", // 0% 处的颜色borderColor: "rgba(17,166,188, .7)",
                      color: "#125D7D",
                    },
                    {
                      offset: 1,
                      // color: "#53C9C7", // 100% 处的颜色
                      color: "#125D7D", // 100% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
            },
          },
          {
            roam: false, //缩放和平移
            type: "map",
            map: "hf",
            zlevel: -2,
            zoom: 0.9,
            layoutCenter: ["50%", "51.4%"],
            layoutSize: "110%",
            silent: true,
            itemStyle: {
              normal: {
                borderColor: "rgba(17,166,188, .5)",
                shadowColor: "rgba(6,228,219, .5)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "rgba(6,228,219, .1)",
              },
            },
          },
        ],

        series: [
          //标记 图形 原点 scatter点 effectScatter涟漪特效
          {
            tooltip: {
              alwaysShowContent: false,
              trigger: "item",
              backgroundColor: "transparent",
              borderColor: "transparent",
              extraCssText: "z-index:100;color:#fff;",
              confine: true, //是否将 tooltip 框限制在图表的区域内
              formatter: (params, ticket, callback) => {
                params = params.data;
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                var carState = params.carState;
                var speed = params.speed;
                var mileage = params.mileage;
                var soc = params.soc;
                var chargingState = params.chargingState;
                var totalVoltage = params.totalVoltage;
                var current = params.current;
                var maxVoltage = params.maxVoltage;
                var minVoltage = params.minVoltage;
                var maxTemperature = params.maxTemperature;
                var minTemperature = params.minTemperature;
                // var carCount = params.data ? params.data.carValue : 0;
                let carBg = require("@/assets/home/floatLayer.png");
                let car = require("@/assets/images/stationIcon.png");
                // let area = this.level == 1 ? "区域2" : "城市2";
                res = `<div style="box-shadow: 0 0 0.1rem #3BD9D9; padding: 0.2rem;width:auto;position: absolute; top: 0; left:0;background:url(${carBg}) no-repeat center;background-size:100% 100%;">
                              <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>所选车辆：<span>${name}</span></div>
                              <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>车辆状态：<span style="${
                                carState == 1 ? "color: #33F4E9" : "color: red"
                              }">${carState == 1 ? "启动" : "熄火"}</span></div>
                               <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>当前车速：<span>${speed} km/h</span></div>
                              <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>行驶里程：<span>${mileage} km</span></div>
                              <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>当前SOC：<span>${soc}</span></div>
                              <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>充电状态：<span>${
                                chargingState == 1 ? "充电" : "未充电"
                              }</span></div>
                              <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>总电压：<span>${totalVoltage}</span> V</div>
                              <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>总电流：<span>${current}</span> A</div>
                              <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>电池单体电压最高值：<span>${maxVoltage}</span> V</div>
                              <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>电池单体电压最低值：<span>${minVoltage}</span> V</div>
                              <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>最高温度值：<span>${maxTemperature}</span> ℃</div>
                              <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>最低温度值：<span>${minTemperature}</span> ℃</div>
                          </div>`;
                return res;
              },
            },
            type: "scatter",
            coordinateSystem: "geo",
            symbolSize: 5,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "#fff",
              },
            },
            zlevel: 1,
            data: convertData(geoCoordData2),
          },
        ],
      };
      this.option = option;
      // 改变屏幕大小图表重新加载
      let resizeDiv = this.$refs.charts2; // 这个是渲染echarts的div
      let listener = () => {
        myChart1.resize();
      };
      EleResize.on(resizeDiv, listener);
      myChart1.clear();
      option && myChart1.setOption(option, true);
      myChart1.off("click");
      myChart1.on("click", this.echartsHandelClick);
      var count = 0;
      var dataLength = option.series[0].data.length;
      this.mapTimer && clearInterval(this.mapTimer);
      this.mapTimer = setInterval(() => {
        myChart1.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart1.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        myChart1.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        count++;
      }, 3000);
      let ths1 = this;
      myChart1.on("mouseover", function (params) {
        clearInterval(ths1.mapTimer);
        this.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        this.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        });
        this.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        });
      });
      myChart1.on("mouseout", function (params) {
        ths1.timer && clearInterval(ths1.timer);
        let me = this;
        ths1.timer = setInterval(function () {
          me.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
          });
          me.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: count % dataLength,
          });
          me.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: count % dataLength,
          });
          count++;
        }, 3000);
      });
    },

    //地图切换
    handleBack(level) {
      console.log(484);
      if (level !== this.level && level <= 2) {
        this.isMap = false;
        this.isCar = true;
        this.isEcharts = true;
        this.isDetail = true;
        this.eleSHowMsg = false;
        setTimeout(() => {
          this.isEcharts = true;
        }, 300);
        //去除车辆循环定时器
        clearInterval(this.carTimer);
        this.history.splice(level);
        // this.five(10);
        // this.$refs.swtSort.handelHet();
        this.$nextTick(() => {
          setTimeout(() => {
            // this.$refs.swtSort.carDrive();
          }, 0);
        });
        if (level === 1) {
          console.log(904);
          this.getList();
          // this.$refs.ele1.swtData();
          // this.$refs.ele2.swtData();
          // this.$refs.ele3.swtData();
          // this.$refs.ele4.swtData();
          // this.$refs.dat.swtData();
          // this.fetchStationShowData("", this.prvId);
          // this.fetchStationChangeElectricFrequency(); //获取全国换电频次趋势
          // this.fetchStationChangeDateRank(); //获取全国换电站换电时间段分布
          // this.fetchStationChangeElectricTimes(); //获取全国换电站换电时间段分布
          // this.fetchStationChangeTimesRank(); //获取全国换电站换电次数排行
          this.myEchart();
        } else if (level === 2) {
          this.cityMap(this.prvParams);
          // this.$refs.ele1.swtData();
          // this.$refs.ele2.swtData();
          // this.$refs.ele3.swtData();
          // this.$refs.ele4.swtData();
          // this.$refs.dat.swtData();
          // this.fetchStationShowData("", this.prvId);
          // this.fetchStationChangeElectricFrequency("", this.prvId); //获取市级换电频次趋势
          // this.fetchStationChangeDateRank("", this.prvId); //获取市级换电站换电时间段分布
          // this.fetchStationChangeElectricTimes("", this.prvId); //获取市级换电站换电时间段分布
          // this.fetchStationChangeTimesRank("", this.prvId); //获取换电站换电次数排行
        }
      } else if (level >= 2 && level !== this.level) {
        console.log(1820);
        if (level === 3) {
          console.log(1822);
          this.history.splice(level);
          // this.$refs.ele1.swtData();
          // this.$refs.ele2.swtData();
          // this.$refs.ele3.swtData();
          // this.$refs.ele4.swtData();
          // this.fetchStationShowData("", "", this.cityId);
          // this.fetchStationChangeElectricFrequency("", "", this.cityId); //获取市级换电频次趋势
          // this.fetchStationChangeDateRank("", "", this.cityId); //获取市级换电站换电时间段分布
          // this.fetchStationChangeElectricTimes("", "", this.cityId); //获取市级换电站换电时间段分布
          // this.fetchStationChangeTimesRank("", "", this.cityId, 7); //获取换电站换电次数排行
          this.isDetail = true;
          this.eleSHowMsg = false;
          // this.setMessageCar(); //开启车辆循环定时器
        }
      }
      this.level = level;
    },

    // 获取站点换电次数分布
    fetchStationChangeElectricTimes(ta, pid, cid) {
      let obj1 = { rangeOfTime: 7, provenceId: "", cityId: "" };
      if (ta) {
        obj1.rangeOfTime = ta;
      }
      if (cid) {
        obj1.cityId = cid;
      }
      if (pid) {
        obj1.provenceId = pid;
      }
      let arr = [
        { name: "1", value: 2 },
        { name: "2", value: 3 },
        { name: "3", value: 5 },
        { name: "4", value: 1 },
        { name: "5", value: 2 },
        { name: "6", value: 1 },
        { name: "7", value: 2 },
        { name: "8", value: 6 },
        { name: "9", value: 5 },
        { name: "10", value: 8 },
        { name: "11", value: 3 },
        { name: "12", value: 2 },
        { name: "13", value: 1 },
        { name: "14", value: 2 },
        { name: "15", value: 4 },
        { name: "16", value: 5 },
        { name: "17", value: 2 },
        { name: "18", value: 8 },
        { name: "19", value: 5 },
        { name: "20", value: 3 },
        { name: "21", value: 2 },
        { name: "22", value: 6 },
        { name: "23", value: 1 },
        { name: "24", value: 2 },
      ];
      this.electric = arr;
      this.electricTrendData = [
        {
          time: "2021-01",
          value: "1",
        },
        {
          time: "2021-02",
          value: "2",
        },
        {
          time: "2021-03",
          value: "3",
        },
        {
          time: "2021-04",
          value: "4",
        },
        {
          time: "2021-05",
          value: "5",
        },
        {
          time: "2021-06",
          value: "6",
        },
      ];
    },

    //确定选择时间
    thisActive(e) {
      this.home1Time = e;
      this.getElectricOrderSort();
    },
    thisActive2(e) {
      this.home2Time = e;
      this.electricPriceSortList();
    },
    thisActive3(e) {
      this.home3Time = e;
      this.getStationNum();
    },
    thisActive4(e) {
      this.home4Time = e;
      this.getCarElectricSort();
    },
    thisActive5(e) {
      this.home5Time = e;
      this.getCarMileageSort();
    },
    // 鼠标选择展示车辆信息
    setMessageCar1(e) {
      let hix = 0;
      this.makers.forEach((item, index) => {
        if (item._amap_id == e) {
          hix = index;
        }
      });
      let carBg = require("@/assets/images/carFloatBg.png");
      this.$nextTick(() => {
        let thMark = this.makers[hix];
        let queryImg1 = "";
        if (this.coverData[hix].eStatus === 0) {
          queryImg1 = require("@/assets/images/eleShadow1.png");
        } else {
          queryImg1 = require("@/assets/images/eleShadow2.png");
        }
        let icon1 = new AMap.Icon({
          size: new AMap.Size(64, 64), // 图标尺寸
          image: queryImg1, // Icon的图像
          imageSize: new AMap.Size(64, 64), // 根据所设置的大小拉伸或压缩图片
        });
        thMark.setIcon(icon1);
        thMark.setzIndex(99);
        thMark.setOffset({ x: -42, y: -42 });
        let info = this.coverData[hix];
        let ct = "";
        if (info.stationInfo) {
          ct = `<div style="background:url(${carBg}) no-repeat center;background-color:transparent;background-size:100% 100%;padding:0.1rem">
            <div class="bg-screen-label-text">
            <div class="bg-screen-label-title">所选站点：${
              info.stationName
            }</div>
             <ul class="bg-screen-car-data">
             <li>今日换电订单数：${info.toDayExchangeNum}</li>
             <li>电池数：${info.weeklyBatteryNum}</li>
             <li>近一周换电次数：${info.weeklyExchangeBatteryNum}</li>
             <li style="${
               !info.stationInfo.plc_Electricity ? "display:none" : ""
             }">电能：${info.stationInfo.plc_Electricity}kw/h</li>
             <li style="${
               !info.stationInfo.plc_Humidity1 ? "display:none" : ""
             }">湿度1：${info.stationInfo.plc_Humidity1}%rh</li>
             <li style="${
               !info.stationInfo.plc_Humidity2 ? "display:none" : ""
             }">湿度2：${info.stationInfo.plc_Humidity2}%rh</li>
             <li style="${
               !info.stationInfo.plc_Humidity3 ? "display:none" : ""
             }">湿度3：${info.stationInfo.plc_Humidity3}%rh</li>
             <li style="${
               !info.stationInfo.plc_Temperature1 ? "display:none" : ""
             }">温度1：${info.stationInfo.plc_Temperature1}℃</li>
             <li style="${
               !info.stationInfo.plc_Temperature2 ? "display:none" : ""
             }">温度2：${info.stationInfo.plc_Temperature2}℃</li>
             <li style="${
               !info.stationInfo.plc_Temperature3 ? "display:none" : ""
             }">温度3：${info.stationInfo.plc_Temperature3}℃</li>
             <li style="${
               !info.stationInfo.plc_Smoke1 ? "display:none" : ""
             }">烟雾1：${info.stationInfo.plc_Smoke1}ppm</li>
             <li style="${
               !info.stationInfo.plc_Smoke2 ? "display:none" : ""
             }">烟雾2：${info.stationInfo.plc_Smoke2}ppm</li>
             <li style="${
               !info.stationInfo.plc_Smoke3 ? "display:none" : ""
             }">烟雾3：${info.stationInfo.plc_Smoke3}ppm</li>
             <li style="${
               !info.stationInfo.plc_Liquid_Level ? "display:none" : ""
             }">液位：${info.stationInfo.plc_Liquid_Level}ml</li>
             </ul>
            </div>
            </div>`;
        } else {
          ct = `<div style="background:url(${carBg}) no-repeat center;background-color:transparent;background-size:100% 100%;padding:0.1rem">
            <div class="bg-screen-label-text">
            <div class="bg-screen-label-title">所选站点：${info.stationName}</div>
             <ul class="bg-screen-car-data">
             <li>今日换电订单数：${info.toDayExchangeNum}</li>
             <li>电池数：${info.weeklyBatteryNum}</li>
             <li>近一周换电次数：${info.weeklyExchangeBatteryNum}</li>
             </ul>
            </div>
            </div>`;
        }

        thMark.setLabel({
          offset: new AMap.Pixel(0, 50), //设置文本标注偏移量
          content: ct, //设置文本标注内容
          direction: "right", //设置文本标注方位
        });
      });
    },
    // 获取全国换电站信息
    fetchStationMapInfo() {
      ChinamapDataCity().then((res) => {
        console.log("全国地图", res);
        let arr = [];
        let objs = res.data.mapData;
        objs.forEach((item, index) => {
          let pl = {};
          pl.name = item.name;
          pl.value = item.value;
          pl.id = item.id;
          pl.carValue = item.carValue;
          arr.push(pl);
        });
        this.stationData = arr;
        // for(var i = 0;i < this.stationData.length;i++){
        //   if(!this.stationData[i].carValue){
        //     this.stationData.splice(i,1)
        //   }
        // }
        // console.log('1196',this.stationData)
        this.myEchart();
        // this.setMessageCar();
      });

      // let obj = { provenceId: "" };
      // if (pid) {
      //   obj.eProvinceId = pid;
      // }
      // let arr = [];
      // let objs = [{
      //   areaId:1046,
      //   cityName:'安徽省',
      //   stationCount:27
      // },{
      //   areaId:1375,
      //   cityName:'山东省',
      //   stationCount:21
      // }]
      // objs.forEach((item, index) => {
      //   let pl = {};
      //   pl.name = item.cityName;
      //   pl.value = item.stationCount;
      //   pl.id = item.areaId;
      //   arr.push(pl);
      // });
      // this.stationData = arr;
      // this.myEchart();
    },
    async myEchart() {
      console.log(759, this.level);
      const ret = await axios.get(
        "https://hz.zeqingev.com/static/map/china.json"
      );
      let max = 4000;
      this.chinaJson = ret.data;
      this.$echarts.registerMap("china", this.chinaJson);
      myChart1 = this.$echarts.init(this.$refs.charts);
      myChart1.resize();
      /*获取地图数据*/
      let mapFeatures = ret.data.features;
      let geoCoordMap = {};
      mapFeatures.forEach(function (item) {
        // 地区名称
        var name = item.properties.name;
        // 地区经纬度
        geoCoordMap[name] = item.properties.cp;
      });
      console.log("this.stationData:" + JSON.stringify(this.stationData));
      for (let i = 0; i < this.stationData.length; i++) {
        let geoCoord = geoCoordMap[this.stationData[i].name];
        if (geoCoord) {
          this.pointData.push({
            name: this.stationData[i].name,
            value: geoCoord.concat(this.stationData[i].value),
            carValue: geoCoord.concat(this.stationData[i].carValue),
            battyValue: geoCoord.concat(this.stationData[i].battyValue),
            id: this.stationData[i].id,
          });
        }
      }
      // var yuan1 = this.level == 1?'gold':'transparent'
      // var yuan2 = this.level == 1?'green':'transparent'
      const option = {
        animation: true,
        animationDuration: 2000,
        animationEasing: "cubicInOut",
        animationDurationUpdate: 2000,
        animationEasingUpdate: "cubicInOut",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          width: "auto",
          height: "auto",
          right: "10%",
          top: 5,
          bottom: "10%",
          left: "10%",
        },
        geo: [
          {
            roam: false, //缩放和平移
            map: this.mapName,
            zlevel: -1,
            zoom: 0.9,
            silent: true,
            layoutCenter: ["50%", "50%"],
            layoutSize: "110%",
            itemStyle: {
              normal: {
                borderColor: "rgba(17,166,188, .7)",
                borderWidth: 3,
                shadowColor: "rgba(6,228,219, .5)",
                shadowOffsetY: 0,
                shadowBlur: 10,
                // areaColor: 'rgba(29,85,139,.6)',
              },
            },
            label: {
              normal: {
                //静态的时候展示样式
                show: false, //是否显示地图省份得名称
                textStyle: {
                  color: "#fff",
                  fontSize: "12%",
                  fontFamily: "Arial",
                },
              },
              emphasis: {
                //动态展示的样式
                show: false,
                color: "#fff",
              },
            },
          },
          {
            roam: false, //缩放和平移
            show: true,
            map: this.mapName,
            zoom: 0.9,
            layoutCenter: ["50%", "50%"],
            layoutSize: "110%",
            label: {
              normal: {
                //静态的时候展示样式
                show: false, //是否显示地图省份得名称
                textStyle: {
                  color: "#fff",
                  fontSize: "12%",
                  fontFamily: "Arial",
                },
              },
              emphasis: {
                //动态展示的样式
                color: "#fff",
              },
            },

            blur: {
              label: { show: true, color: "#000" },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  color: "#fff",
                },
                color: "#fff",
                borderColor: "rgba(17,166,188, .7)",
                borderWidth: 1.5,
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 1000,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      // color: "#0D59C1", // 0% 处的颜色
                      color: "#044049",
                    },
                    {
                      offset: 0.5,
                      // color: "#53C9C7", // 100% 处的颜色
                      color: "#062F40", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      // color: "#53C9C7", // 100% 处的颜色
                      color: "#000", // 100% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: "#fff",
                },
                borderWidth: 3,
                borderColor: "rgba(255, 230, 175,0.8)",
                shadowColor: "rgba(255, 230, 175,0.5)",
                shadowBlur: 30,
                textStyle: {
                  color: "#fff",
                  fontSize: "12%",
                  backgroundColor: "transparent",
                },
                areaColor: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#0c797a",
                    },
                    {
                      offset: 1,
                      color: "#0e6699",
                    },
                  ],
                  false
                ),
              },
            },
          },
          {
            roam: false, //缩放和平移
            type: "map",
            map: this.mapName,
            zlevel: -2,
            zoom: 0.9,
            layoutCenter: ["50%", "51.4%"],
            layoutSize: "110%",
            silent: true,
            itemStyle: {
              normal: {
                borderColor: "rgba(17,166,188, .7)",
                shadowColor: "rgba(6,228,219, .5)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "rgba(6,228,219, .1)",
              },
            },
          },
          // {
          //   roam: false, //缩放和平移
          //   type: "map",
          //   map: this.mapName,
          //   zlevel: -3,
          //   zoom: 0.9,
          //   layoutCenter: ["50%", "52.4%"],
          //   layoutSize: "110%",
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderColor: "#06E2D9",
          //       shadowColor: "rgba(6,228,219, .5)",
          //       shadowOffsetY: 15,
          //       shadowBlur: 8,
          //       areaColor: "rgba(6,228,219, .1)",
          //     },
          //   },
          // },
        ],

        series: [
          {
            show: true,
            roam: false, //缩放和平移
            type: "map",
            animation: true,
            zoom: 0.9,
            hoverAnimation: true,
            // left: "10%",
            // center: [117.283042, 31.86119],
            layoutCenter: ["50%", "50%"],
            layoutSize: "110%",
            label: {
              normal: {
                //静态的时候展示样式
                show: false, //是否显示地图省份得名称
                textStyle: {
                  color: "#fff",
                  fontSize: "12%",
                },
              },
              emphasis: {
                //动态展示的样式
                color: "#fff",
              },
            },
            // geoIndex: 0,
            map: this.mapName,
            tooltip: {
              alwaysShowContent: false,
              trigger: "item",
              backgroundColor: "transparent",
              borderColor: "transparent",
              extraCssText: "z-index:100;color:#fff;",
              confine: true, //是否将 tooltip 框限制在图表的区域内
              formatter: (params, ticket, callback) => {
                console.log(1405, params);
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                // var count = params.value ? params.value : 0;
                var carCount = params.data ? params.data.carValue : 0;
                // var battyCount = params.data ? params.data.battyValue : 0;
                let carBg = require("@/assets/home/floatLayer.png");
                let car = require("@/assets/images/stationIcon.png");
                // let area = this.level == 1 ? "区域2" : "城市2";
                res = `<div style="box-shadow: 0 0 0.1rem #3BD9D9; padding: 0.2rem;width:auto;position: absolute; top: 0; left:0;background:url(${carBg}) no-repeat center;background-size:100% 100%;">
<!--                              <div style="width:100%;height:0.2rem;margin-bottom:0.15rem">-->
<!--                              <img style="display:block;height:0.2rem;object-fit: cover;" src="${car}"/>-->
<!--                              </div>-->
<!--                             <div style="display: flex; align-items: center;padding-top: 0.06rem;">-->
                             <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>车子数量：<span style="color: #CA9B5D">${carCount}</span> 辆</div>

<!--                             </div>-->
                          </div>`;
                return res;
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  color: "#fff",
                },
                // borderColor: "#75f9ff",
                borderColor: "rgba(17,166,188, .7)",
                borderWidth: 2,
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#0D59C1", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(159,247,255,0.1)", // 100% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: "#fff",
                },
                borderWidth: 3,
                borderColor: "rgba(6,228,219, .5)",
                shadowColor: "rgba(6,228,219, .5)",
                color: "#125D7D", //移入后的颜色
                shadowBlur: 30,
                textStyle: {
                  color: "#fff",
                  fontSize: "12%",
                  backgroundColor: "transparent",
                },
                areaColor: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#0c797a",
                    },
                    {
                      offset: 1,
                      color: "#0e6699",
                    },
                  ],
                  false
                ),
              },
            },
            data: this.stationData,
          },
          {
            hoverAnimation: true,
            type: "effectScatter",
            coordinateSystem: "geo",
            rippleEffect: {
              brushType: "fill",
            },
            tooltip: {
              alwaysShowContent: false,
              trigger: "item",
              backgroundColor: "transparent",
              borderColor: "transparent",
              extraCssText: "z-index:100;color:#fff;",
              confine: true, //是否将 tooltip 框限制在图表的区域内
              formatter: (params, ticket, callback) => {
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                // var count = params.value ? params.value[2] : 0;
                var carCount = params.data ? params.data.carValue[2] : 0;
                // var battyCount = params.data ? params.data.battyValue[2] : 0;
                // var carCount = params.carValue ? params.carValue[2] : 0;
                // var battyCount = params.battyValue ? params.battyValue[2] : 0;
                let carBg = require("@/assets/home/floatLayer.png");
                let car = require("@/assets/images/stationIcon.png");
                // let area = this.level == 1 ? "区域1" : "城市1";
                // res = `<div style="box-shadow: 0 0 0.1rem #3BD9D9; padding: 0.3rem;position: absolute; top: 0; left:0;background:url(${carBg}) no-repeat center;background-size:100% 100%;">
                //             <div style="width:100%;height:0.2rem;margin-bottom:0.15rem">
                //             <img style="display:block;height:0.2rem;object-fit: cover;" src="${car}"/>
                //             </div>
                //            <div style='color:#fff; font-size: 0.18rem;margin-bottom:0.15rem'>${area}：${name}</div>
                //            <div style="display: flex; align-items: center;padding-top: 0.06rem;">
                //            <div style='color:#fff; font-size: 0.18rem;'>站点：${count}</div>
                //            </div>
                //         </div>`;
                res = `<div style="box-shadow: 0 0 0.1rem #3BD9D9; padding: 0.2rem;width:auto;position: absolute; top: 0; left:0;background:url(${carBg}) no-repeat center;background-size:100% 100%;">
<!--                              <div style="width:100%;height:0.2rem;margin-bottom:0.15rem">-->
<!--                              <img style="display:block;height:0.2rem;object-fit: cover;" src="${car}"/>-->
<!--                              </div>-->
<!--                             <div style="display: flex; align-items: center;padding-top: 0.06rem;">-->
                             <div style='color:#fff; font-size: 0.14rem;box-sizing: border-box'>车子数量：<span style="color: #CA9B5D">${carCount}</span> 辆</div>
<!--                             </div>-->
                          </div>`;
                return res;
              },
            },
            label: {
              show: true,
              color: "#fff",
              formatter: function (obj) {
                return obj.name;
              },
              fontSize: "12%",
            },
            symbolSize: function (val) {
              var value = val[2];
              if (value < max) {
                return 10;
              }
              return 15;
            },
            showEffectOn: "render", //加载完毕显示特效
            itemStyle: {
              normal: {
                // color: "#FEBE13", // 圆点的颜色
                color: "gold",
                shadowBlur: 5,
                shadowColor: "green",
              },
            },
            zlevel: 6,
            data: this.pointData,
          },
          {
            type: "custom",
            coordinateSystem: "geo",
            zlevel: 10,
            data: this.pointData,
          },
        ],
      };
      this.option = option;
      // 改变屏幕大小图表重新加载
      let resizeDiv = this.$refs.charts; // 这个是渲染echarts的div
      let listener = () => {
        myChart1.resize();
      };
      EleResize.on(resizeDiv, listener);
      myChart1.clear();
      option && myChart1.setOption(option, true);
      myChart1.off("click");
      myChart1.on("click", this.echartsHandelClick);
      var count = 0;
      var dataLength = option.series[0].data.length;
      this.mapTimer && clearInterval(this.mapTimer);
      this.mapTimer = setInterval(() => {
        myChart1.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart1.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        myChart1.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        count++;
      }, 3000);
      let ths1 = this;
      myChart1.on("mouseover", function (params) {
        clearInterval(ths1.mapTimer);
        this.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        this.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        });
        this.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        });
      });
      myChart1.on("mouseout", function (params) {
        ths1.timer && clearInterval(ths1.timer);
        let me = this;
        ths1.timer = setInterval(function () {
          me.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
          });
          me.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: count % dataLength,
          });
          me.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: count % dataLength,
          });
          count++;
        }, 3000);
      });
    },

    // 市级地图
    async cityMap(params) {
      console.log("1688", params);
      if (this.level == 3) {
        this.level = 2;
        return;
      }
      if (!this.isCanClick) return;
      this.isCanClick = false;
      setTimeout(() => {
        this.isCanClick = true;
      }, 2000);
      let prvName = params.name;
      console.log(1699, prvName);
      this.jsonData.forEach((item) => {
        if (item.name.includes(prvName)) {
          this.currentProvince = item;
        }
      });
      console.log("1703", "/static/map/province/" + this.currentProvince.value);
      /*获取省的所有地级市地图数据*/
      const ret1 = await axios.get(
        "https://hz.zeqingev.com/static/map/province/" +
          this.currentProvince.value
      );

      let pid = params.data.id;
      homeMapDataCity({ areaId: pid }).then((response) => {
        console.log("省级", response);
        let cityData = response.data.mapData;
        // let cityData = [{
        //   battyValue: 648,
        //   carValue: 580,
        //   id: 1047,
        //   name: "合肥市",
        //   value: 12
        // },{
        //   battyValue: 38,
        //   carValue: 28,
        //   id: 1142,
        //   name: "六安市",
        //   value: 5
        // }]
        this.getList(pid, "2");
        this.cityData1 = cityData;
        this.chinaJson = ret1.data;
        myChart1 = this.$echarts.init(this.$refs.charts);
        this.$echarts.registerMap(this.currentProvince.name, this.chinaJson);
        let mapFeatures = ret1.data.features;
        let geoCoordMap = {};
        mapFeatures.forEach(function (item) {
          // 地区名称
          var name = item.properties.name;
          // 地区经纬度
          geoCoordMap[name] = item.properties.cp;
        });
        for (let i = 0; i < this.cityData1.length; i++) {
          let geoCoord = geoCoordMap[this.cityData1[i].name];
          if (geoCoord) {
            this.pointData1.push({
              name: this.cityData1[i].name,
              value: geoCoord.concat(this.cityData1[i].value),
              carValue: geoCoord.concat(this.cityData1[i].carValue),
              battyValue: geoCoord.concat(this.cityData1[i].battyValue),
              id: this.cityData1[i].id,
            });
          }
        }
        this.option.geo.forEach((item) => {
          item.map = this.currentProvince.name;
        });
        this.option.series.forEach((item, index) => {
          if (index === 0) {
            item.map = this.currentProvince.name;
            item.data = this.cityData1;
          } else {
            item.data = this.pointData1;
          }
        });
        myChart1.setOption(this.option, true);
        this.level = 2;
        window.addEventListener("resize", () => {
          myChart1.resize();
        });
        myChart1.off("click");
        myChart1.on("click", this.echartsHandelClick);
        var count = 0;
        var dataLength = this.option.series[0].data.length;
        this.mapTimer && clearInterval(this.mapTimer);
        this.mapTimer = setInterval(() => {
          myChart1.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
          });
          myChart1.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: count % dataLength,
          });
          myChart1.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: count % dataLength,
          });
          count++;
        }, 3000);
        let ths1 = this;
        myChart1.on("mouseover", function (params) {
          clearInterval(ths1.mapTimer);
          this.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
          });
          this.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: params.dataIndex,
          });
          this.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: params.dataIndex,
          });
        });
        myChart1.on("mouseout", function (params) {
          ths1.mapTimer && clearInterval(ths1.mapTimer);
          let me = this;
          ths1.mapTimer = setInterval(function () {
            me.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
            });
            me.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: count % dataLength,
            });
            me.dispatchAction({
              type: "showTip",
              seriesIndex: 0,
              dataIndex: count % dataLength,
            });
            count++;
          }, 3000);
        });
        // });
      });
    },
    // 地图下钻
    async echartsHandelClick(params) {
      if (this.clickTrue) {
        return;
      } else {
        if (!params.data || !params.data.id) {
          return;
        }
        this.clickTrue = true;
        if (this.level === 2) {
          let cid = params.data.id; //获取城市的id
          this.cityId = cid;
          this.isMap = true;
          this.isEcharts = false;
          this.isCar = false;
          this.getList(cid, "3");
          this.$nextTick(() => {
            setTimeout(() => {
              // this.$refs.swtSort.carDrive();
            }, 100);
          });
          let center = [];
          let prvName = params.name;
          this.history.push(prvName);
          this.chinaJson.features.forEach((item) => {
            if (item.properties.name == params.name) {
              center = item.properties.cp;
            }
          });
          // this.level = 4
          console.log(1818, this.level);

          console.log("点击了省", params);
          let cityname = params.name;
          let cityname2 = "";
          this.cityJsonData.forEach((item) => {
            if (item.name.includes(cityname)) {
              cityname2 = item;
            }
          });
          console.log("cityname2", cityname2);
          this.cityParmas = "/static/map/province/" + cityname2.value;

          let areaId = params.data.id;
          this.getHomeCarMap(areaId);
          // mapDataDistrict({ areaId: cid }).then((res) => {
          //   if (res.data.stationMapInfo && res.data.stationMapInfo.length > 0) {
          //     this.coverData = res.data.stationMapInfo;
          //     center = [
          //       res.data.stationMapInfo[0].lnt,
          //       res.data.stationMapInfo[0].lat,
          //     ];
          //     this.myEchart2();
          //   }
          //   // this.setMessageCar();
          // });
        } else if (this.level === 1) {
          let pid = params.data.id; //获取省会的id
          this.prvId = pid;
          // this.$refs.dat.swtData();
          // this.$refs.ele1.swtData();
          // this.$refs.ele2.swtData();
          // this.$refs.ele3.swtData();
          // this.$refs.ele4.swtData();
          // this.fetchStationShowData("", pid);
          // this.fetchStationChangeElectricFrequency("", pid);
          // this.fetchStationChangeDateRank("", pid);
          // this.fetchStationChangeElectricTimes("", pid);
          // this.fetchStationChangeTimesRank("", pid);
          this.prvParams = params;
          this.cityMap(params);
          this.history.push(params.name);
        }
        this.level++;
        setTimeout(() => {
          this.clickTrue = false;
        }, 300);
      }
    },
    // 地图
    getmap(cet) {
      let ths = this;
      this.myMap = new AMap.Map("mapView", {
        resizeEnable: true,
        center: cet,
        // center: [this.coverData[0].latitude, this.coverData[0].longitude],
        zoom: 14,
        //  mapStyle: "amap://styles/darkblue",
        mapStyle: "amap://styles/c33798df27f2df823802471a49c35a04",
      });
      // this.myMap.clearMap(); // 清除地图覆盖物
      // this.myMap.setFitView();
      this.makers = []; //清除标记
      let cover = this.coverData;
      for (let i = 0; i < cover.length; i++) {
        // 创建 AMap.Icon 实例：
        let queryImg = "";
        if (cover[i].eStatus === 0) {
          queryImg = require("@/assets/images/ele1.png");
        } else {
          queryImg = require("@/assets/images/ele2.png");
        }
        let icon = new AMap.Icon({
          size: new AMap.Size(54, 54), // 图标尺寸
          image: queryImg, // Icon的图像
          // imageOffset: new AMap.Pixel(-57, -57), // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(54, 54), // 根据所设置的大小拉伸或压缩图片
        });

        let marker = new AMap.Marker({
          position: new AMap.LngLat(cover[i].lnt, cover[i].lat),
          offset: new AMap.Pixel(-37, -37),
          icon: icon, // 添加 Icon 图标 URL
          zoom: 16,
          extData: {
            id: cover[i].eId,
            name: cover[i].stationName,
            info: cover[i],
            status: cover[i].eStatus,
          },
        });
        this.makers.push(marker);
        this.myMap.add(marker);
        // 鼠标移动上去时展示数据
        let _this = this;
        marker.on("mouseover", function (e) {
          // clearInterval(_this.carTimer);
          // _this.setMessageCar1(e.target._amap_id);
        });
        marker.on("mouseout", function (e) {
          // _this.setMessageCar();
        });
        marker.on("click", function (e) {
          let infoData = e.target.B.Il.content.De.extData.info;
          if (infoData.eStatus !== 0) {
            ths.$message({
              showClose: true,
              message: "该站点未启用",
              type: "warning",
              customClass: "message-type message-type-warning",
            });
            return;
          }
          let eid = e.target.B.Il.content.De.extData.id;
          let staName = e.target.B.Il.content.De.extData.name;
          let arr = [];
          ths.eleId = eid;
          ths.staName = staName;
          // if (infoData.stationInfo) {
          //   let {
          //     plc_Humidity1,
          //     plc_Humidity2,
          //     plc_Humidity3,
          //     plc_Smoke1,
          //     plc_Smoke2,
          //     plc_Smoke3,
          //     plc_Temperature1,
          //     plc_Temperature2,
          //     plc_Temperature3,
          //   } = infoData.stationInfo;
          //   for (let i = 1; i < 4; i++) {
          //     let obj = {};
          //     if (i == 1) {
          //       obj.humidity = plc_Humidity1;
          //       obj.smoke = plc_Smoke1;
          //       obj.temperature = plc_Temperature1;
          //     } else if (i == 2) {
          //       obj.humidity = plc_Humidity2;
          //       obj.smoke = plc_Smoke2;
          //       obj.temperature = plc_Temperature2;
          //     } else if (i == 3) {
          //       obj.humidity = plc_Humidity3;
          //       obj.smoke = plc_Smoke3;
          //       obj.temperature = plc_Temperature3;
          //     }
          //     arr.push(obj);
          //   }
          // }
          ths.stationSwiper = arr;
          // this.$forceUpdate();强制渲染
          // ths.$refs.ele5.swtData();
          // ths.$refs.ele6.swtData();
          // ths.$refs.ele7.swtData();
          ths.isDetail = false;
          // ths.fetchStationBatteryChargerInfo(eid);
          // ths.fetchStationElectricTrend("", "", eid);
          // ths.fetchStationChangeDateRank("", "", "", eid);
          // ths.fetchStationChangeElectricFrequency("", "", "", eid);
          // ths.$refs.homeTrend.runResize(); //换电频次趋势
          // ths.$refs.eleTime1.runResize();
          ths.level = 4;
          ths.eleSHowMsg = true;
          // ths.history.push(staName);
        });
      }
    },
    // 换电趋势图
    electricTrend() {
      this.$nextTick(function () {
        if (this.$refs.eleTrend) {
          const colorList = [
            "#04C8F9",
            "#28FFF2",
            "#FCBA62",
            "#F93F00",
            "#34DB34",
          ];
          this.electricTrendEcharts = this.$echarts.init(this.$refs.eleTrend);
          this.electricTrendEcharts.clear();
          this.electricTrendEcharts.resize();
          let inx = this.electricTrendData
            ? parseInt(this.electricTrendData.timeList.length / 4)
            : "auto";
          let option = {
            tooltip: {
              trigger: "axis",
              backgroundColor: "rgba(15,66,108,0.8)",
              padding: 10,
              textStyle: {
                color: "#1ed5ff",
                fontSize: "14%",
              },
            },
            legend: {
              data: this.electricTrendData.stationList,
              itemStyle: {
                borderMiterLimit: 5,
              },
              formatter: function (name) {
                return "{a|" + name + "}";
              },
              textStyle: {
                color: "#fff",
                fontSize: "14%",
                // 文字块背景色，一定要加上，否则对齐不会生效
                backgroundColor: "transparent",
                rich: {
                  a: {
                    width: 90,
                  },
                },
              },
            },
            grid: {
              left: "10%",
              right: "10%",
              bottom: "3%",
              width: "auto",
              height: "auto",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: this.electricTrendData.timeList,
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: inx,
                // showMaxLabel: true, //是否显示最后一个标签
                fontSize: "12%",
              },
              axisLine: {
                lineStyle: {
                  color: "#43a4c5",
                },
              },
            },
            yAxis: {
              type: "value",
              axisTick: {
                show: false,
              },
              axisLabel: {
                fontSize: "14%",
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#43a4c5",
                },
              },
              splitLine: {
                lineStyle: {
                  type: "dashed",
                  color: "#1d4f60",
                },
              },
            },
            series: [
              {
                name: this.electricTrendData.stationList[0],
                type: "line",
                data: this.electricTrendData.countList[0],
                color: colorList[0],
                symbolSize: 4,
                symbol: "circle",
                lineStyle: {
                  shadowColor: colorList[0],
                  shadowBlur: 20,
                },
              },
              {
                name: this.electricTrendData.stationList[1],
                type: "line",
                data: this.electricTrendData.countList[1],
                color: colorList[1],
                symbolSize: 4,
                symbol: "circle",
                itemStyle: {
                  color: colorList[1],
                },
                lineStyle: {
                  shadowColor: colorList[1],
                  shadowBlur: 20,
                },
              },
              {
                name: this.electricTrendData.stationList[2],
                type: "line",
                data: this.electricTrendData.countList[2],
                color: colorList[2],
                lineStyle: {
                  shadowColor: colorList[2],
                  shadowBlur: 20,
                },
                itemStyle: {
                  color: colorList[2],
                },
                symbolSize: 4,
                symbol: "circle",
              },
              {
                name: this.electricTrendData.stationList[3],
                type: "line",
                data: this.electricTrendData.countList[3],
                color: colorList[3],
                lineStyle: {
                  shadowColor: colorList[3],
                  shadowBlur: 20,
                },
                itemStyle: {
                  color: colorList[3],
                },
                symbolSize: 4,
                symbol: "circle",
              },
              {
                name: this.electricTrendData.stationList[4],
                type: "line",
                data: this.electricTrendData.countList[4],
                color: colorList[4],
                lineStyle: {
                  shadowColor: colorList[4],
                  shadowBlur: 20,
                },
                itemStyle: {
                  color: colorList[4],
                },
                symbolSize: 4,
                symbol: "circle",
                emphasis: { symbolSize: 6 },
              },
            ],
          };
          let resizeDiv = this.$refs.eleTrend; // 这个是渲染echarts的div
          let listener = () => {
            this.electricTrendEcharts.resize();
          };
          EleResize.on(resizeDiv, listener);
          this.allOption.electricTrendOption = option;
          option && this.electricTrendEcharts.setOption(option);
        }
      });
    },
    getList() {
      this.loading = true;
      // 获取基础数据
      getBaseCenter({ stationId: this.stationId }).then((res) => {
        this.nowCarDatas = [
          { name: "换电总程", num: res.data.electricMile },
          { name: "换电频次", num: res.data.electricCount },
          { name: "换电订单总额/万", num: res.data.electricPrice },
          { name: "电池总数", num: res.data.batteryAmount },
        ];
      });
    },
    getCarElectricSort() {
      this.carElectrics = [];
      getCarElectricSort({
        type: this.home4Time.time,
        stationId: this.stationId,
      }).then((response) => {
        this.carElectrics = response.data;
      });
    },
    getElectricOrderSort() {
      this.electricOrders = [];
      getElectricOrderSort({
        type: this.home1Time.time,
        stationId: this.stationId,
      }).then((response) => {
        this.electricOrders = response.data;
      });
    },
    electricPriceSortList() {
      this.billOrders = [];
      electricPriceSortList({
        type: this.home2Time.time,
        stationId: this.stationId,
      }).then((response) => {
        this.billOrders = response.data;
      });
    },
    getCarMileageSort() {
      this.carSortData = [];
      getCarMileageSort(this.home5Time.time).then((response) => {
        this.carSortData = response.data;
      });
    },
    getStationNum() {
      this.stationNum = [];
      getStationNum({
        type: this.home3Time.time,
        stationId: this.stationId,
      }).then((res) => {
        this.stationNum = res.data;
      });
    },
    getHomeCarMap(areaId) {
      console.log("areaId", areaId);
      this.homeCar = [];
      getHomeCarMap({ areaId: areaId }).then((res) => {
        console.log("三级", res);
        console.log(2209, this.level);
        this.homeCar = res.data;
        this.myEchart2();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.dashboard-editor-container::-webkit-scrollbar {
  width: 0 !important;
}
// .map-bg-box{
//   background-image: url("../assets/images/indexMapBg.png");
//   background-repeat: no-repeat;
//   background-size: 100% 100%;
//   background-position: 13.75rem 37.5rem;
// }
.dashboard-editor-container {
  // padding: 32px;
  /* background-color: rgb(240, 242, 245); */
  position: relative;
  background-image: url("../assets/home/homeBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // min-height: 100vh;
  padding-bottom: 0.24rem;
  //overflow-y: auto;
  .header-box {
    height: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    //background: #1ab394;
    background-image: url("../assets/images/indexTopBg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // padding: .8125rem 2.25rem .625rem;
    position: relative;
    .header-box-left {
      display: flex;
      align-items: center;
      top: 10px;
      left: 50px;
      img {
        width: 1.93rem;
        height: 0.27rem;
        margin-left: 0.36rem;
      }
      .header-box-left-text {
        color: #fff;
        //margin-left: 8.75rem;
      }
    }
    .header-box-right {
      .top-right {
        font-size: 0.16rem;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        color: #dfeef3;
        margin-right: 0.27rem;
      }
    }
  }
  .content-box {
    .content-top {
      height: 7.49rem;
      width: 18.7rem;
      padding: 0 0.28rem;
      display: flex;
      justify-content: space-between;
      .content-top-left {
        width: calc(0.6666666666 * 100vw);
        height: 7.49rem;
      }
      .content-top-right {
        width: 6.08rem;
        .content-top-right-top,
        .content-top-right-bottom {
          width: 6.08rem;
          height: 3.38rem;
          background: rgba(6, 39, 67, 0.2);
          border-top: 0.01rem solid #43d4f3;
        }
      }
    }
    .content-bottom {
      box-sizing: border-box;
      width: 18.18rem;
      height: 2.8rem;
      display: flex;
      align-content: center;
      margin: 0 0.24rem;
      .content-bottom-left {
        background: rgba(6, 39, 67, 0.2);
        flex: 1;
        border-top: 0.01rem solid #43d4f3;
        .content-bottom-left-box {
          display: flex;
          align-items: center;
          justify-content: space-around;
          .c-b-l-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top: 0.38rem;
            .c-b-l-l-top {
              background-image: url("../assets/images/indexClglPic1.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 0.98rem;
              height: 1.16rem;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 0.3rem;
              font-family: Bahnschrift, Bahnschrift-Regular;
              font-weight: 400;
              color: #ffffff;
              margin-bottom: 0.01rem;
            }
            .c-b-l-l-top2 {
              background-image: url("../assets/images/indexClglPic2.png");
            }
            .c-b-l-l-top3 {
              background-image: url("../assets/images/indexClglPic3.png");
            }
            .c-b-l-l-top4 {
              background-image: url("../assets/images/indexClglPic4.png");
            }
            .c-b-l-l-bottom {
              width: 1.1rem;
              height: 0.21rem;
              margin-top: 0.05rem;
              background-image: url("../assets/images/indexClglPic5.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              font-size: 0.14rem;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              color: #82a3c4;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .c-b-l-l-bottom2 {
              background-image: url("../assets/images/indexClglPic6.png");
              color: #7baba8;
            }
            .c-b-l-l-bottom3 {
              background-image: url("../assets/images/indexClglPic7.png");
              color: #a78f70;
            }
            .c-b-l-l-bottom4 {
              background-image: url("../assets/images/indexClglPic8.png");
              color: #c37963;
            }
          }
        }
      }
      .content-bottom-center {
        background: rgba(6, 39, 67, 0.2);
        flex: 1;
        margin: 0 0.22rem;
        border-top: 0.01rem solid #43d4f3;
        .cities-info {
          width: 100%;
          height: 2.8rem;
          padding-bottom: 0.25rem;
        }
      }
      .content-bottom-right {
        background: rgba(6, 39, 67, 0.2);
        flex: 1;
        border-top: 0.001rem solid #43d4f3;
        height: 0.41rem;
        .hdzsj-box {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          padding: 0.04rem 0.45rem 0;
          .hdzsj-list {
            width: 50%;
            display: flex;
            align-items: center;
            margin-bottom: 0.1rem;
            .hdzsj-pic-box {
              width: 1.2rem;
              height: 0.7rem;
              margin: 0 0.035rem 0.1rem 0;
              img {
                width: 1.2rem;
                height: 0.7rem;
              }
            }

            .hdzsj-right {
              .hdzsj-name {
                font-size: 0.16rem;
                font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                font-weight: 400;
                color: #bac3c4;
                margin: 0.3rem 0 0.06rem 0.2rem;
              }
              .hdzsj-value {
                width: 1.14rem;
                font-size: 0.26rem;
                font-family: PangMenZhengDao, PangMenZhengDao-Regular;
                padding: 0 0 0.08rem.22rem;
                margin: 0rem 0 0 0;
                font-weight: 400;
                color: #ffffff;
                background-image: url("../assets/images/indexHdzsjUnmBg.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
              }
            }
          }
        }
      }
    }
  }
  .chart-wrapper {
    background: #fff;
    padding: 0.16rem 0.16rem 0;
    margin-bottom: 0.32rem;
  }
}

@media (max-width: 6.375rem) {
  .chart-wrapper {
    padding: 0.5rem;
  }
}

.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // overflow: hidden;
  margin-top: 18.75rem;

  span {
    font-size: 3.75rem;
    color: #20b2aa;
  }
}

.content {
  width: 100%;
  margin: 0 auto;
  // overflow: hidden;
  padding-bottom: 1.875rem;
  background: #f8f8f8;

  .headTp {
    padding-top: 1.875rem;
  }

  .conLF {
    width: 73%;
    // height: 1000px;
    // background: #000;
    float: left;

    .grid-content {
      height: 9.375rem;
      background: white;

      h1 {
        margin: 0;
        font-size: 0.875rem;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: LEFT;
        color: #333333;
        line-height: 1.125rem;
        letter-spacing: 0px;
        padding-top: 1.25rem;
        margin-left: 1.25rem;
      }

      .cn {
        width: 100%;

        .cnItem {
          width: 50%;
          float: left;
          text-align: center;
          font-size: 2.5rem;
          font-family: DIN, DIN-Bold;
          font-weight: bold;
          color: #333333;
          line-height: 1.125rem;
          letter-spacing: 0rem;

          span.explain {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 0.75rem;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            color: #666666;
            line-height: 1.125rem;
            letter-spacing: 0px;
            margin-top: 1.1875rem;
          }
        }

        .cnItem:last-child {
          float: right;
        }
      }
    }

    .zdInfo-content {
      height: 20rem;
      background: white;

      h1 {
        margin: 0;
        font-size: 0.875rem;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: LEFT;
        color: #333333;
        line-height: 1.125rem;
        letter-spacing: 0px;
        padding-top: 1.25rem;
        margin-left: 1.25rem;
      }

      .cnItem {
        width: 100%;

        span {
          display: block;
          width: 100%;
          text-align: center;
          font-size: 1.25rem;
          font-family: DIN, DIN-Bold;
          font-weight: 700;
          color: #333333;
          line-height: 1.125rem;
          letter-spacing: 0px;
        }

        span:last-child {
          font-size: 0.75rem;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          color: #666666;
          line-height: 1.125rem;
          letter-spacing: 0px;
          margin-top: 0.6875rem;
        }
      }
    }

    .zdInfo-content1 {
      .proportion {
        display: flex;
        justify-content: center;
      }

      .cnItem {
        width: 100%;

        span {
          font-size: 0.75rem;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          color: #666666;
          line-height: 1.125rem;
          letter-spacing: 0px;
          // margin-top: 11px;
        }

        .number {
          // overflow: hidden;
          margin-bottom: 0.5rem;

          span {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 1.25rem;
            font-family: DIN, DIN-Bold;
            font-weight: 700;
            color: #333333;
            line-height: 1.125rem;
            letter-spacing: 0px;
          }
        }
      }
    }
  }

  .conRH {
    width: 25%;
    float: right;

    .notice {
      width: 100%;
      height: 28.125rem;
      background: #ffffff;

      ul li {
        // overflow: hidden;
        margin-bottom: 0.875rem;
        cursor: pointer;
      }

      ul li span {
        float: left;
      }

      ul li span:first-child {
        width: 60%;
        height: 1.25rem;
        line-height: 1.25rem;
        font-size: 0.875rem;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #666666;
        line-height: 1.125rem;
        letter-spacing: 0px;
        // overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      ul li span:last-child {
        width: 38%;
        height: 1.25rem;
        line-height: 1.25rem;
        text-align: right;
        font-size: 0.75rem;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #999999;
        line-height: 1.125rem;
        letter-spacing: 0px;
      }
    }
  }

  .ordeSiteStatistics {
    // overflow: hidden;
    // background: #ffffff;
  }
}
//.showArea {
//  display: flex;
//  margin-left: .4rem;
//  font-family: Arial, Helvetica, sans-serif;
//  align-items: center;
//  font-size: .16rem;
//  color: #fff;
//  font-weight: bold;
//  span {
//    cursor: pointer;
//    color: #04c8f9;
//    margin-right: 0.1rem;
//    margin-left: 0.1rem;
//  }
//  span:hover {
//    text-shadow: 0 0 .3125rem #04c8f9;
//    font-size: 0.22rem;
//  }
//}
.amap-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  position: relative;
  .ech-map {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    background-image: url("../assets/images/indexMapBg.png");
    background-repeat: no-repeat;
    background-size: 6.91rem 2.38rem;
    background-position: 3rem 5.4rem;
  }
  #mapView {
    width: 100%;
    height: 100%;
  }
}
::v-deep .noOpenTagsView {
  margin-left: 0 !important;
}
.canvas-header-box {
  margin: 0.11rem 0.15rem 0 0.15rem;
  background: rgba(35, 169, 255, 0.08);
  padding: 0.17rem 0.15rem;
  font-size: 0.16rem;
  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-content: center;
  img {
    width: 0.18rem;
    height: 0.18rem;
    margin-right: 0.06rem;
  }
}
.mileage {
  width: 100%;
  height: 2.6rem;
  position: relative;
  .dccszb-data-bg {
    width: 2.86rem;
    height: 2rem;
    position: absolute;
    top: 0.42rem;
    left: 3.06rem;
  }
}
.noOpenTagsView {
  margin-left: 0 !important;
}
.noData {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 2rem;
  justify-content: center;
  align-items: center;
  font-size: 0.14rem;
  color: #fff;
}
.home-top {
  width: 100vw;
  height: 0.85rem;
  background-image: url("../assets/home/homeTopBg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  position: relative;

  .home-title-pic {
    width: 2.13rem;
    height: 0.4rem;
    margin: 0.2rem auto 0.24rem;
  }
}
.home-box {
  height: 9rem;
  width: 100%;
  padding: 0 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  .home-left {
    width: 25%;
    height: 100%;
    //background: #9a6e3a;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .home-center {
    width: 50%;
    height: 100%;
    position: relative;
    //background: #13ce66;
    .home-center-top {
      width: 8.4rem;
      height: 0.93rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0.2rem auto;
      position: relative;
      .home-center-top-list {
        width: 2rem;
        height: 0.93rem;
        padding: 0.2rem 0 0.2rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background-image: url("../assets/home/homeCenterTopListBg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .home-center-top-list-top {
          font-size: 0.26rem;
          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
          font-weight: 700;
          color: #ffffff;
        }
        .home-center-top-list-bottom {
          font-size: 0.14rem;
          font-family: Source Han Sans CN, Source Han Sans CN-Regular;
          font-weight: 400;
          color: #37d5ff;
        }
      }
    }
    .home-center-bottom {
      width: 100%;
      height: calc(100% - 1.55rem);
      background-image: url("../assets/home/homeCityBg.png");
      background-repeat: no-repeat;
      background-size: 9.008rem 7.6rem;
      background-position: 0 0.8rem;
    }
  }
  .home-right {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
}
.home-list {
  width: 100%;
  height: calc((100% - 40px) / 2);
  .home-list-title {
    width: 100%;
    height: 0.36rem;
    background-image: url("../assets/home/homeListTopBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-left: 0.2rem;
    display: flex;
    align-items: center;
    font-size: 0.16rem;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 0.2rem;
    justify-content: space-between;
  }
  .home-list-content {
    width: 100%;
    height: 4rem;
  }
  .home-list-content1 {
    background-image: url("../assets/home/homeList1Bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    .content1-list {
      width: 33%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .content1-top {
        font-size: 0.22rem;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: center;
        color: #f3f3f3;
      }
      .content1-bottom {
        font-size: 0.14rem;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: center;
        color: #57d6f8;
      }
    }
  }
}
.header-box-left {
  display: flex;
  align-items: center;
  //position: absolute;
  //top: 1.8rem;
  //left: .2rem;
}
.showArea {
  display: flex;
  margin-left: 0.4rem;
  font-family: Arial, Helvetica, sans-serif;
  align-items: center;
  font-size: 0.16rem;
  color: #fff;
  font-weight: bold;
  span {
    cursor: pointer;
    color: #04c8f9;
    margin-right: 0.1rem;
    margin-left: 0.1rem;
  }
  line-height: 0.22rem;
  span:hover {
    //text-shadow: 0 0 .3125rem #04c8f9;
    font-size: 0.22rem;
    color: #fff;
  }
}
</style>
